<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      user-select: none;
      /* height: 20px; */
    }

    .content {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 320px;
      height: 207px;
      margin: auto;
    }

    .content ul {
      list-style-type: none;
    }

    .content ul li {
      position: absolute;
    }

    .content ul li img {
      display: block;
      width: 300px;
      border: 10px solid #958a0d;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="content">
    <ul>
      <li><img src="images/1.jpg" alt=""></li>
      <li><img src="images/2.jpg" alt=""></li>
      <li><img src="images/3.jpg" alt=""></li>
      <li><img src="images/4.jpg" alt=""></li>
      <li><img src="images/5.jpg" alt=""></li>
    </ul>
  </div>
  <script>
    var oCon = document.getElementsByClassName('content')[0];
    var aLi = oCon.getElementsByTagName('li');
    var len = aLi.length;
    var winW, winH, leftMax, topMax;
    var index = 0;
    var timer;

    // 盒子的宽高
    var w = oCon.clientWidth;
    var h = oCon.clientHeight;

    // 获取最大值最小值
    function ltMax() {
      winW = window.innerWidth;
      winH = window.innerHeight;

      leftMax = (winW - w) / 2;
      topMax = (winH - h) / 2;
      console.log(leftMax, topMax)
    }
    ltMax();
    window.onresize = ltMax;

    // 事件委托
    document.addEventListener('mousedown', function (e) {

      // 设表先关
      clearInterval(timer)
      e = e || window.event;

      // 获取事件源元素对象 元素对象是图片
      var target = e.target || e.srcElement;

      //e.preventDefault();
      cancelHandle(e)
      // 获取事件源的元素对象的父级是li
      var parent = target.parentNode;

      if (parent.nodeName == 'LI') {
        var startX = e.clientX;
        var startY = e.clientY;
        var startLeft = parent.offsetLeft;
        var startTop = parent.offsetTop;

        var nowX = 0, nowY = 0;
        var _x, _y;

        // console.log(startX, startY, startLeft, startTop)

        document.onmousemove = function (e) {
          e = e || window.event;

          // 获取最后两点的距离差
          _x = e.clientX - nowX;
          _y = e.clientY - nowY;

          nowX = e.clientX;
          nowY = e.clientY;
          // console.log(e.clientX, e.clientY)

          var nowLeft = nowX - startX + startLeft;
          var nowTop = nowY - startY + startTop;

          nowLeft = Math.min(nowLeft, leftMax);
          nowLeft = Math.max(nowLeft, -leftMax);

          nowTop = Math.min(nowTop, topMax);
          nowTop = Math.max(nowTop, -topMax);

          parent.style.left = nowLeft + 'px';
          parent.style.top = nowTop + 'px';

          parent.style.zIndex = ++index;
        }

        document.onmouseup = function () {
          this.onmousemove = null;
          this.onmouseup = null;

          timer = setInterval(function () {
            _x *= 0.9;
            _y *= 0.9;

            var nowLeft = parent.offsetLeft + _x;
            var nowTop = parent.offsetTop + _y;

            if (nowLeft > leftMax || nowLeft < -leftMax) {
              _x = -_x
            }
            if (nowTop > topMax || nowTop < -topMax) {
              _y = -_y
            }

            nowLeft = Math.min(nowLeft, leftMax);
            nowLeft = Math.max(nowLeft, -leftMax);

            nowTop = Math.min(nowTop, topMax);
            nowTop = Math.max(nowTop, -topMax);

            parent.style.left = nowLeft + 'px';
            parent.style.top = nowTop + 'px';


            if (Math.abs(_x) < 0.5 && Math.abs(_y) < 0.5) {
              clearInterval(timer)
            }
          }, 20)
        }
      }

    }, false)


    // 清除默认行为
    function cancelHandle(e) {
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        e.returnValue = false;
      }
    }


    // 获取屏幕宽高的兼容
    function getViewOffset() {
      if (window.innerWidth) {
        return {
          w: window.innerWidth,
          h: window.innerHeight
        }
      } else {
        if (document.compatMode == 'CSS1Compat') {
          return {
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight
          }
        } else {
          return {
            w: document.body.clientWidth,
            h: document.bocy.clientHeight
          }
        }
      }
    }

  </script>
</body>

</html>